<template>
  <main>
    <template v-if="load_status">
      <div class="lbox">
        <div class="weizhi">
          您现在的位置是：<nuxt-link to="/">首页</nuxt-link>&nbsp;>&nbsp;<span
            >便签</span
          >
        </div>
        <v-progress-linear
          v-show="loading"
          indeterminate
          color="green"
        ></v-progress-linear>
        <div class="time_box">
          <ul>
            <li v-for="(s, i) in lastest" :key="i">
              <span class="time-line">{{ s.create_at }}</span>
              <nuxt-link :to="'/view/' + s.id + '/2'" target="_blank">
                <h2>{{ s.title }}</h2>
                <i>
                  <v-img
                    v-if="s.img"
                    lazy-src="/occupying.png"
                    :src="s.img"
                  ></v-img>
                  <v-img
                    v-else
                    lazy-src="/occupying.png"
                    src="/occupying.png"
                  ></v-img>
                </i>
              </nuxt-link>
              <p>
                {{ s.descr }}
              </p>
              <i class="time_lm">阅读:{{ s.view }}</i>
            </li>
          </ul>
        </div>
        <pagination :page="page" :pages="pages" @change_event="change_event" />
      </div>
      <aside class="rbox">
        <!-- <div class="ad">
          <a
          href="https://www.aliyun.com/minisite/goods?userCode=l1qstn8f&share_source=copy_link"
          target="_blank"
          ><img
            src="static/picture/ad2.jpg"
            alt="星星海SA2云服务器高性价比首选1核2G首年99元起"
            /></a>
        </div> -->
        <div class="lm_hot">
          <p class="h_title">个人标签</p>
          <ul>
            <a v-for="(s, i) in labels" :key="i">{{ s.title }}</a>
          </ul>
        </div>
        <div class="lm_hot">
          <p class="h_title">当前时间</p>
          <jh-clock :width="200" :height="200" :shadow="true"/>
        </div>
      </aside>
    </template>
    <!-- 错误反馈 -->
    <v-alert v-else dense outlined type="error">
      {{ system_error }}
    </v-alert>
  </main>
</template>

<script>
import axios from "../utils/axios"
import Cache  from '../utils/cache'
import {AuthRequest} from "../utils/auth"
import JhClock from '../components/JhClock.vue';
export default {
  components: { JhClock },
  data() {
    return {
      labels: [],
      lastest: [],
      loading: true,
      load_status: true,
      system_error: "",
      page: 1,
      pages: 1,
      count: 0,
      keywords: "",
      Authorization:'',
    };
  },
  computed: {
    cur_query() {
      return this.$route.query;
    },
  },
  async asyncData({ route,req,error }) {
    let keywords = route.query.keywords ? route.query.keywords : "";
    let page = route.query.page ? route.query.page : 1;
    return AuthRequest(req,'GET',"diaries?page=" + page + "&keywords=" + encodeURI(keywords))
      .then((res) => {
        if (res.code != 200) {
          console.error(res)
          return error({statusCode:res.code})
        }
        const data = res.data;

        return {
          loading: false,
          lastest: data.lastest,
          labels: data.labels,
          load_status: true,
          count: data.count,
          page,
          pages: data.pages,
          keywords,
          Authorization:data.Authorization,
        };
      })
      .catch((err) => {
        //console.error(err)
          return error({statusCode:err.code})
      });
  },
  watch: {
    cur_query(query) {
      this.page = 1;
      this.keywords = query.keywords ? query.keywords : "";
      this.load_list();
    },
  },
  mounted(){
    Cache.set("Authorization", this.Authorization, 3600*2);
  },
  methods: {
    change_event(page) {
      this.page = page;
      this.load_list();
    },
    load_list() {
      this.loading = true;
      axios
        .get(
          "diaries?page=" + this.page + "&keywords=" + encodeURI(this.keywords)
        )
        .then((res) => {
          if (res.code != 200) {
            this.load_status = false;
            this.system_error = res.msg;
          } else {
            const data = res.data;
            this.loading = false;
            this.lastest = data.lastest;
            this.labels = data.labels;
            this.load_status = true;
            this.count = data.count;
            this.pages = data.pages;
          }
        });
    },
  },
};
</script>
<style scoped>
.blogs_lm {
  color: #ffff;
}
.nav {
  line-height: normal;
}
a {
  color: #333;
}
.time_box ul{
  padding-left: 0;
}
.time_lm {
  font-style: normal;
  color: #8a8a8a;
}
.time-line{
  box-sizing: content-box;
}
</style>
